<template>
  <div class="container">
    <!-- swiper区域 -->
    <my-swiper :list="list" @onActiveIndex="onActiveIndex"></my-swiper>
    <!--  阅读区域 -->
    <ReadList :readList="readList"></ReadList>
    <ReadTag :readList="readList" />
  </div>
</template>
<script>
import axios from 'axios'
import MySwiper from './components/Swiper.vue'
import ReadList from './components/ReadList.vue'
import ReadTag from './components/ReadTag.vue'
export default {
  components: { MySwiper, ReadList, ReadTag },
  data() {
    return {
      msg: 'vue',
      list: [],
      readList: [],
    }
  },
  created() {
    this.getSwiperList()
    this.getReadList()
  },
  methods: {
    onActiveIndex(index) {
      console.log('index我是在父组件拿到的下标', index)
    },
    // 请求的轮播图数据
    async getSwiperList() {
      const res = await axios.get('/api/carousel')
      console.log('res:', res)
      this.list = res.data
    },
    // 请求list数据
    async getReadList() {
      const res = await axios.get('/api/list', {
        params: { _page: 1, _limit: 5 },
      })
      console.log('res:', res)
      this.readList = res.data
    },
  },
}
</script>
<style lang="scss">
.read-item {
  line-height: 35px;
  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  border-bottom: 1px solid #eee;
}
.tag {
  display: inline-block;
  padding: 5px 10px;
  margin: 5px;
  border: 1px solid #eee;
  border-radius: 5px;
}
</style>
